<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>circle</title>
	<link rel="stylesheet" href="../css/reset.css">
	<link rel="stylesheet" href="../css/rem.css">
	<link rel="stylesheet" href="../css/circle.css?name=123" />
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>

<body>
	<!-- 外框 -->
	<div id="waikuang" v-cloak>
		<!-- 发现页头部 -->
		<div id="top" class="circle_top">
			<div class="fanhui">
				<a href="javascript:;" onclick="history.back();"><img src="../img/fanhui.PNG"></a>
			</div>

			<div class="text_top">
				<p>{{title}}</p>
			</div>
		</div>

		<!-- 内容 -->

		<div class="content">
			<ul>
				<li v-for="item in lists">
					<a href="#">
							<div class="circle-top">
								<div class="xiaomiao_pic">
									<img :src="item.avatar" alt="">
								</div>
								<p>{{item.name}}</p>
							</div>
						<div class="banner" v-if="item.url">
							<img :src="item.url" alt="">
						</div>
                       <div class="con-info" :class="[!item.url?'self':'']">
						  <span style="font-size: 0.16rem;" v-html="item.content"></span>
					   </div>
						<div class="content-lis">
							<div class="item">
								<img src="../img/xihuan.png" alt="">
								
								<i>LIKE</i>
							</div>
							<div class="item">
								<img src="../img/shoucang-3.png" alt="">
								<i>COLLECT</i>
							</div>
							<div class="item">
								<img src="../img/xiaoxi.png" alt="">
							</div>

						</div>
					</a>
				</li>
			</ul>
		</div>


		<!-- 底部导航栏 -->
		<div class="foot_menu">
			<!-- <div class="bei"></div> -->
			<ul>
				<li>
					<a href="home.html">
						<img src="../img/ziyuanzhuye.png">
					</a>
				</li>
				<li class="faxian">
					<a href="circle.html">
						<img src="../img/rongheCDN.jpg">
					</a>
				</li>
				<li>
					<a href="message.html">
						<img src="../img/xinxi.png">
					</a>
				</li>
				<li>
					<a href="personal.html">
						<img src="../img/yaoqinghaoyou.png">
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- 发现页内容 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
	<script>
		new Vue({
			el: '#waikuang',
			data: {
				title: 'CIRCLE',
				lists: [
					{
						avatar: '../img/aichong07.png',
						name: '物业小喵',
						content: '&nbsp;&nbsp;&nbsp;尊敬的各位业主，本周小区将进行园林杀虫，留心小孩不要随意触碰，避免误食',
						url: ''
					}, {
						avatar: '../img/aichong29.png',
						name: '业主小汪',
						content: '经过一家可爱的店',
						url: '../img/xiaowangPic.png'
					}
				]
			}
		})
	</script>
</body>

</html>